<template>
  <div class="edit">
    <van-nav-bar
      title="个人信息编辑"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({ path: '/home' })"
    >
      <template #right>
        <van-icon name="wap-home-o" color="red" size="25" />
      </template>
    </van-nav-bar>

    <div class="info">
      <div class="avatar">
        <van-uploader :after-read="afterRead">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            radius="50%"
            :src="userInfo.head_img"
          />
        </van-uploader>
      </div>
    </div>
    <MyCell
      title="昵称"
      :value="userInfo.nickname"
      @click="
        nickNameShow = true;
        nickName = userInfo.nickname;
      "
    ></MyCell>
    <MyCell
      title="密码"
      :value="userInfo.password"
      @click="passwordShow = true"
    ></MyCell>
    <MyCell
      title="性别"
      :value="userInfo.gender ? '男' : '女'"
      @click="genderShow = true"
    ></MyCell>

    <!-- 修改密码 -->
    <van-dialog
      v-model="passwordShow"
      title="修改密码"
      show-cancel-button
      @confirm="passwordFn"
      :before-close="beforeClose"
    >
      <van-field
        v-model="passwordOld"
        label="旧密码"
        placeholder="请输入旧密码"
      />
      <van-field
        v-model="passwordNew"
        label="新密码"
        placeholder="请输入新密码"
        right-icon="eye-o"
        :type="passwordType"
        @click-right-icon="
          passwordType = passwordType === 'password' ? 'text' : 'password'
        "
      />
    </van-dialog>
    <!-- 修改昵称 -->
    <van-dialog
      v-model="nickNameShow"
      title="修改昵称"
      show-cancel-button
      @confirm="nickNameFn"
    >
      <van-field v-model="nickName" label="昵称" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-action-sheet
      v-model="genderShow"
      :actions="actions"
      @select="genderFn"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script>
import { userDetailByIdAPI } from "../apis/user";
import { uploadFileAPI, userUpdataByIdAPI } from "../apis/index";
import request from "../utils/request";
import MyCell from "../components/MyCell.vue";
export default {
  data() {
    return {
      userInfo: {},
      nickNameShow: false,
      nickName: "",

      passwordShow: false,
      passwordNew: "",
      passwordOld: "",
      passwordType: "password",

      genderShow: false,
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 },
      ],
    };
  },
  components: {
    MyCell,
  },
  async created() {
    const id = this.$route.query.id;
    const res = await userDetailByIdAPI(id);
    console.log(res);
    res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
    this.userInfo = res.data.data;
  },
  methods: {
    changePosswordType() {
      if (this.passwordType === "password") {
      }
    },
    async afterRead(file) {
      const fd = new FormData();
      fd.append("file", file.file);
      const res = await uploadFileAPI(fd);
      //   console.log("res", res);
      if (res.data.message === "文件上传成功") {
        const imgUrl = res.data.data.url;
        const res2 = await userUpdataByIdAPI(this.$route.query.id, {
          head_img: imgUrl,
        });
        // console.log("res2", res2);
        // console.log(this.userInfo);
        this.userInfo.head_img =
          request.defaults.baseURL + res2.data.data.head_img;
        this.$toast.success("头像更新成功");
      }
    },
    async nickNameFn() {
      if (this.nickName === "") {
        this.$dialog({ message: "昵称不能为空，请重新输入" });
        return;
      }
      const res3 = await userUpdataByIdAPI(this.$route.query.id, {
        nickname: this.nickName,
      });
      this.userInfo.nickname = res3.data.data.nickname;
      this.$toast.success("用户昵称更新成功");
    },
    passwordFn() {
      console.log("修改了密码");
    },
    async beforeClose(action, done) {
      if (action === "confirm") {
        if (
          this.passwordOld === this.userInfo.password &&
          /^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/.test(this.passwordNew)
        ) {
          const res = await userUpdataByIdAPI(this.$route.query.id, {
            password: this.passwordNew,
          });
          console.log(res);
          if (res.data.message == "修改成功") {
            this.userInfo.password = this.passwordNew;
            this.passwordNew = "";
            this.passwordOld = "";
            this.$toast.success("密码修改正确");
            done();
          }
        } else {
          done(false);
          this.$toast.fail("原密码错误或新密码不符合格式");
        }
      } else {
        done();
      }
    },
    genderFn(item) {
      //   console.log("item", item.gender);
      this.userInfo.gender = item.gender;
      this.$toast.success("性别修改成功");
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  height: 160px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  .avatar {
    width: 80px;
    height: 80px;
  }
}
</style>
